<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            border: 0;
            margin: 0;
            background: #edebe7;
        }
        .box{
            width: 100%;
            height: 70px;
            background: rgb(255, 255, 255);
            margin: auto;
            position: relative;
        }
        .box_img{
            width: 215px;
            height: 70px;
            background-image: url(images/jy.png);
            position: absolute;
            left: 200px; 
        }
        .box_logo{
            width: 148px;
            height: 68px;
            background-image: url(images/logo_txt.png);
            position: absolute;
            left: 410px;
        }
        .box_text{
            width: 136px;
            height: 25px;
            position: absolute;
            left: 550px;
            top: 25%;
        }
        .box_text input{
            width: 136px;
            height: 25px;
            border: 1px solid #999;
            background: rgb(255, 255, 255);
            color: #999;
            outline: none;    /* 消除默认点击蓝色边框效果 */
        }
        .box_password{
            width: 136px;
            height: 25px;
            position: absolute;
            left: 700px;
            top: 25%;
        }
        .box_password input{
            width: 136px;
            height: 25px;
            border: 1px solid #999;
            background: rgb(255, 255, 255);
            color: #999;
            outline: none;    /* 消除默认点击蓝色边框效果 */
        }
        .box_button{
            width: 67px;
            height: 25px;
            background: #0099ff;
            color: #ffffff;
            text-align: center;
            position: absolute;
            left: 850px;
            top: 26%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box_img"></div>
        <div class="box_logo"></div>
        <div class="box_text">
            <input type="text" value=" 邮箱/ID/手机号" id="text">
        </div>
        <div class="box_password">
            <input type="text" value=" 密码" id="password">
        </div>
        <button class="box_button">登入</button>
    </div>
    <script>
        // 1. 获取元素
        var text = document.getElementById('text');
        var password = document.getElementById('password');
        // 2. 注册事件 获得焦点事件 onfocus
         // 账号框
        text.onfocus = function(){
            if(this.value === ' 邮箱/ID/手机号'){
                this.value = '';
            }
            this.style.border = '1px solid pink'; /* 改变边框颜色 */
            this.style.color = '#333';
        }
         // 密码框
        password.onfocus = function(){
            if(this.value === ' 密码'){
                this.value = '';
            }
            this.style.border = '1px solid pink'; /* 改变边框颜色 */
            this.type = 'password';
            this.style.color = '#333';
        }
        // 3. 注册事件 失去焦点事件 onblur
        // 账号框
        text.onblur = function(){
            if(text.value === ''){
                text.value = ' 邮箱/ID/手机号';
            }
             // 失去焦点需要把文本框里面的文字颜色变浅色
             text.style.color = '#999';
             this.style.border = '1px solid #999'; /* 改变边框颜色 */
        }
        // 密码框
        password.onblur = function(){
            if(this.value === ''){
                this.value = ' 密码';
                this.type = 'text';
            }
             // 失去焦点需要把文本框里面的文字颜色变浅色
             this.style.color = '#999';
             this.style.border = '1px solid #999'; /* 改变边框颜色 */
        }
    </script>
</body>
</html>